<template>
	<cu-custom :isBack="true">
		<template #title>修改密码</template>
	</cu-custom>
		
	<view class="white-page">
		<view class="cu-form-group">
			<view class="title">旧密码</view>
			<input :enable-native="false" placeholder="请输入旧密码" password name="input" v-model="password.old">
		</view>
		<view class="cu-form-group">
			<view class="title">新密码</view>
			<input :enable-native="false" placeholder="请输入密码" password name="input" v-model="password.new">
		</view>
		<view class="cu-form-group mb-4">
			<view class="title">重复新密码</view>
			<input :enable-native="false" placeholder="请再次输入新密码" password name="input" v-model="password.new2">
		</view>
		
		<view class="mb-4">
			<CuButton size="small" :disabled="submitDisable" @click="handleSubmit">提交</CuButton>
		</view>
	</view>
	
	
	
</template>

<script setup lang="ts">
import { reactive, ref, Ref } from "vue"
import CuButton from "@/components/CuButton.vue"
import { updatePassword } from "@/api/user.js"
import { router } from "@/router"

interface IPassword {
	old: string
	new: string
	new2: string
}

const password = reactive({
	old: "",
	new: "",
	new2: ""
})
	
const submitDisable: Ref<boolean> = ref(false)

const handleSubmit = (): void => {
	if (password.new !== password.new2) {
		uni.showToast({
			icon: "none",
			title: "两次输入的新密码不一致"
		})
		return
	}
	submitDisable.value = true
	uni.showLoading({
		title: "提交中"
	})
	updatePassword({
		oldPassword: password.old,
		newPassword: password.new
	})
		.then((res) => {
			uni.hideLoading()
			uni.showToast({
				icon: "success",
				title: "修改成功"
			})
			setTimeout(() => {
				router.back()
			}, 1000)
		})
		.catch(() => {
			submitDisable.value = false
		})
	
}


</script>

<style lang="stylus" scoped>
.white-page
	height: 100vh
	background-color: #fff
</style>